@import (reference) "~ui/styles/variables";
@import (reference) "~ui/styles/mixins";
@import "~ui/styles/local_search.less";
@import "~react-grid-layout/css/styles.css";
@import "~react-resizable/css/styles.css";

.exitFullScreenButton {
  text-align: center;
  width: 100%;
  height: 0;
  bottom: 0;
  position: absolute;
}

.layout-edit {
  /**
   * 1. If we don't give the resizable handler a larger z index value the spy toggle will take over the mouse hover.
   */
  .react-resizable-handle {
    z-index: 10; /* 1 */
    right: 4px;
    bottom: 4px;
  }
}

.layout-view {
  /**
   * 1. Due to https://github.com/STRML/react-grid-layout/issues/240 we have to manually hide the resizable
   * element.
   */
  .react-resizable-handle {
    display: none; /* 1. */
  }
}

/**
 * 1. Need to override the react grid layout height when a single panel is expanded. Important is required because
 * otherwise the height is set inline.
 */
.layout-maximized-panel {
  height: 100% !important; /* 1. */
  width: 100%;
  position: absolute;
}

.exitFullScreenMode {
  height: 40px;
  left: 0px;
  bottom: 0px;
  position: fixed;
  display: block;
  padding: 0;
  border: none;
  background: none;
  z-index: 5;
}

.exitFullScreenMode:hover,
.exitFullScreenMode:focus {
  transition: all .5s ease;

  .exitFullScreenModeText {
    visibility: visible;
    opacity: 1;
    transition: all .2s ease;
    transform: translateX(-14px);
  }
}

.exitFullScreenModeLogo {
  display: block;
  background-color: #005571;
  width: 92px;
  height: 40px;
  background-image: url("~ui/images/kibana.svg");
  background-position: 8px 5px;
  background-size: 72px 30px;
  background-repeat: no-repeat;
  z-index: 50;
}

/**
 * 1. Calc made to allow caret in text to peek out / animate.
 */

.exitFullScreenModeText {
  background: @globalColorBlue;
  color: tint(@globalColorBlue, 70%);
  line-height: 40px;
  display: inline-block;
  height: 40px;
  position: absolute;
  left: calc(100% + 14px);  // 1
  top: 0px;
  bottom: 0px;
  white-space: nowrap;
  padding: 0px 4px 0px 10px;
  transition: all .2s ease;
  transform: translateX(-100%);
  z-index: -1;
}

.tab-dashboard {
  background-color: @dashboard-bg;
}


.dashboardCloneModal {
  width: 450px;
}

.dashboard-grid {
  display: block;
  margin: 0;
  padding: 5px;
  z-index: @dashboardGridDepth;
}

.start-screen {
  margin: 20px auto;
  max-width: 800px;
  background: #FFF;
  padding: 40px;
  border-radius: 4px;
}

/**.
 * 1. We need this so the panel menu pop up shows up outside the boundaries of a panel.
 */
.react-grid-layout {
  background-color: @dashboard-bg;

  .dashboard-panel {
    overflow: visible; /* 1. */
  }

  .gs-w {
    z-index: auto;
  }
}

.panel {
  border: solid 1px transparent;
}

/**
 * 1. For expanded panel mode, we want to hide the grid, but keep it rendered so it doesn't cause all visualizations
 * to re-render once the panel is minimized, which is a time consuming operation.
 */
.panel--hidden-mode {
  display: none; /* 1. */
}

.panel--expanded-mode {
  height: 100%;
  width: 100%;
}

.panel--edit-mode {
  border-color: @globalColorLightGray;

  &:hover {
    border-color: @globalColorBlue;

    .panel-title:hover {
      color: @globalColorBlue;
    }

    .panel-heading {
      background-color: rgba(0,0,0,.05) !important;
    }
  }

  .visualize-show-spy {
    visibility: visible;
  }

  .panel-heading {
    cursor: move;
  }
}

.dashboard-container {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.dashboard-container-with-margins {
  background-color: @dashboard-bg-with-margins;
}

/**
 * Needs to correspond with the react root nested inside angular.
 */
dashboard-viewport-provider {
  flex: 1;
  display: flex;
  [data-reactroot] {
    flex: 1;
  }
}

/**
 * Disable transitions from the library on each grid element.
 */
.react-grid-item {
  transition: none;
}

/**
 * Dragged panels in dashboard should always appear above other panels.
 */
.react-grid-item.react-draggable-dragging {
  z-index: @dashboardDraggingGridDepth !important;
}

/**
 * Overwrites red coloring that comes from this library by default.
 */
.react-grid-item.react-grid-placeholder {
  border-radius: 4px;
  background: @globalColorBlue;
}

/**
 * When a single panel is expanded, all the other panels are hidden in the grid.
 */
.grid-item--hidden {
  display: none;
}

/**
 * We need to mark this as important because react grid layout sets the width and height of the panels inline.
 */
.grid-item--expanded {
  height: 100% !important; /* 1. */
  width: 100% !important; /* 1. */
  top: 0 !important; /* 1. */
  left: 0 !important; /* 1. */
}

/**
 * 1. Fix Firefox bug where a value of overflow: hidden will prevent scrolling in a panel where the spy panel does
 * not have enough room.
 * 2. react-select used in input control vis needs `visible` overflow to avoid clipping selection list
 */
.dashboard-panel {
  z-index: auto;
  flex: 1;
  display: flex;
  flex-direction: column;
  height: 100%;

  background: @dashboard-panel-bg;
  color: @dashboard-panel-color;
  padding: 0;
  overflow: visible; /* 1, 2 */

  position: relative;

  .panel {
    margin: 0;
    // maintain the 100% height of the panel
    height: 100%;
    flex: 1;

    // flex layout allows us to define the visualize element as "fill available space"
    display: flex;
    flex-direction: column;
    justify-content: flex-start;

    .panel-heading {
      padding: 8px;
      flex: 0 0 auto;
      white-space: nowrap;
      display: flex;
      border-top-right-radius: 0;
      border-top-left-radius: 0;
      background-color: @white;
      border: none;

      /**
       * 1. Required to get the pop up component arrow to line up with the menu icon.
       */
      .panel-dropdown:hover {
        color: @globalColorBlue;
      }

      .kuiPopover__body {
        z-index: 25;
      }

      .panel-title {
        font-size: inherit;

        // flexbox fix for IE10
        // http://stackoverflow.com/questions/22008135/internet-explorer-10-does-not-apply-flexbox-on-inline-elements
        display: inline-block;

        .ellipsis();
        flex: 1 1 auto;

        i {
          opacity: 0.3;
          font-size: 1.2em;
          margin-right: 4px;
        }
      }

      .panel-move:hover {
        cursor: move;
      }
    }

    .visualize-show-spy {
      visibility: hidden;
    }

    /**
     * 1. Use opacity to make this element accessible to screen readers and keyboard.
     * 2. Show on focus to enable keyboard accessibility.
     */
    .panel-heading-floater {
      opacity: 0; /* 1 */
      position: absolute;
      right: 1px;
      top: 1px;
      background-color: @dashboard-panel-bg;
      z-index: 5;
      &:focus {
        opacity: 1; /* 2 */
      }
    }

    /**
     * 1. Use opacity to make this element accessible to screen readers and keyboard.
     * 2. Show on focus to enable keyboard accessibility.
     */
    .viewModeExpandPanelToggle {
      opacity: 0; /* 1 */
      &:focus {
        opacity: 1; /* 2 */
      }
    }

    &:hover {
      .panel-heading-floater {
        opacity: 1;
      }
      .visualize-show-spy {
        visibility: visible;
      }
      .viewModeExpandPanelToggle {
        opacity: 1;
      }
    }

    .load-error {
      text-align: center;
      font-size: 1em;
      display: flex;
      flex: 1 0 auto;
      justify-content: center;
      flex-direction: column;
      overflow: auto;

      .fa-exclamation-triangle {
        font-size: 2em;
        color: @dashboard-panel-load-error-color;
      }
    }

    /**
     * 1. For tile maps, this is necessary to get the panel pop over to show up. Otherwise the tilemap ends up having
     * a bigger z-index than the pop over.
     */
    .panel-content {
      display: flex;
      flex: 1 1 100%;
      height: auto;
      z-index: 1; /* 1. */
    }

    .panel-content--fullWidth {
      width: 100%;
    }
  }

  /**
   * 1. We want the doc-table-container to scroll only when embedded in a dashboard panel
   */
  .doc-table-container {
    flex: 1 1 0; /* 1 */
    overflow: auto; /* 1 */
  }
}

/**
 * The dashboard background color is the same as the panel color by default. When the user wants to use margins, we
 * need to give a different background color so the panels are distinguishable from the background.
 */
.layout-with-margins {
  background-color: @dashboard-bg-with-margins;
  .panel-heading {
    border-top-left-radius: 4px !important;
    border-top-right-radius: 4px !important;
  }

  .panel-content {
    background-color: @panel-bg-with-margins;
    border-bottom-left-radius: 4px;
    border-bottom-right-radius: 4px;
  }

  .panel {
    border: 1px solid #D9D9D9;
    border-radius: 4px;
    box-shadow: 0 2px 2px -1px rgba(0, 0, 0, 0.1);
  }

  .panel--edit-mode:hover {
    border-color: @globalColorBlue;
    box-shadow: 0 4px 4px -1px rgba(0, 0, 0, 0.1);
  }
}

.dashboard-viewport {
  width: 100%;
  background-color: @dashboard-bg;
}
.dashboard-viewport-with-margins {
  width: 100%;
  background-color: @dashboard-bg-with-margins;
}

.dashboardPanelMenuOptionsForm {
  padding: 16px;
  input {
    width: 100%;
    display: block;
  }
}
